const merge = require('webpack-merge');
const common = require('../webpack.config.js');
const PROJECT = require('./project.config.js');
//JS压缩插件在webpack中已经集成
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');
//css文件单独打包
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//VueLoader插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = merge(common, {
    mode: PROJECT.ENV_PROD,
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                exclude: PROJECT.PATH_NODE
            },
            {
                //当webpack 编译过程中遇到require（）或import 语句导入一个后缀
                //名为. css 的文件时， 先将它通过css-loader 转换， 再通过styl e-load er 转换，然后继续打包。u se 选
                //项的值可以是数组或字符串， 如果是数组， 它的编译顺序就是从后往前。
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, "css-loader"] //MiniCssExtractPlugin.loader
            },
            //图片 loader
            {
                test: /\.(png|jpg|gif|jpeg|svg)(\?.*)?$/,  //是匹配图片文件后缀名称
                use: [{
                    loader: 'url-loader', //是指定使用的loader和loader的配置参数
                    options: {
                        limit: 500, //是把小于500B的文件打成Base64的格式，写入JS
                        outputPath: 'images/' ///打包后的图片放到images文件夹下
                    }
                }]
            },
            {
                test: /\.js$/,
                use: ["babel-loader"],
                exclude: PROJECT.PATH_NODE
            },
            //less loader
            {
                test: /\.less$/,
                use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"]//MiniCssExtractPlugin.loader
            },
            //less loader
            {
                test: /\.scss$/,
                use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]//MiniCssExtractPlugin.loader
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: 'fonts/[name].[hash].[ext]'
                }
            }
        ]

    },
    plugins: [
        //css文件压缩
        new MiniCssExtractPlugin({
            filename: "[name].[hash].css",
            chunkFilename: "[id].[hash].css"
        }),
        // 请确保引入这个插件！
        new VueLoaderPlugin(),
        /**
         *  对JS文件进行压缩的插件
         */
        new UglifyjsWebpackPlugin()
    ]
})